<template>
  <div class="customerRefundAudit">
    <el-form
      :model="results"
      :inline="true"
      size="mini"
      ref="ruleForm"
      label-width="100px"
    >
      <el-form-item label="订单类型">
        <el-select v-model="results.orderType" clearable>
          <el-option label="会员卡订单" value="vipCard"></el-option>
          <el-option label="机票订单" value="flight"></el-option>
          <el-option label="酒店订单" value="hotel"></el-option>
          <el-option label="贵宾厅订单" value="vipLounge"></el-option>
          <el-option label="vip通道订单" value="vipChannel"></el-option>
          <el-option label="火车票订单" value="train"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="会员姓名">
        <el-input
          v-model="results.userName"
          placeholder="请输入客户信息"
        ></el-input>
      </el-form-item>
      <el-form-item label="会员手机号">
        <el-input
          v-model="results.userAccount"
          placeholder="请输入手机号"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item label="会员卡号">
        <el-input
          v-model="results.cardCode"
          placeholder="请输入会员卡号"
        ></el-input>
      </el-form-item> -->
      <el-form-item label="会员退款方式">
        <el-select v-model="results.refundType" clearable>
          <el-option label="原路退回" value="backtracking"></el-option>
          <el-option label="退预留款" value="reserveAmount"></el-option>
          <el-option label="退银行卡" value="bankCard"></el-option>
          <!-- <el-option label="全部" value=""></el-option>
          <el-option label="公司汇款给会员" value="1"></el-option>
          <el-option label="原路退预留款" value="5"></el-option>
          <el-option label="原路退信用卡" value="6"></el-option>
          <el-option label="原路微信自动退款" value="3"></el-option>
          <el-option label="原路支付宝自动退款" value="4"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item label="退款状态">
        <el-select v-model="results.refundStatus" clearable>
          <el-option label="待申请" value="stayApply"></el-option>
          <el-option label="取消申请" value="cancelApply"></el-option>
          <el-option label="待审核" value="stayAudit"></el-option>
          <el-option label="审核不通过" value="cancelAudit"></el-option>
          <el-option label="待支付" value="stayPay"></el-option>
          <el-option label="取消支付" value="cancelPay"></el-option>
          <el-option label="支付失败" value="payFailure"></el-option>
          <el-option label="支付成功" value="paySuccess"></el-option>
          <!-- <el-option label="全部" value=""></el-option>
          <el-option label="初始" value="initial"></el-option>
          <el-option label="已申请" value="requested"></el-option>
          <el-option label="完成(退款完成)" value="complete"></el-option>
          <el-option label="取消" value="cancel"></el-option>
          <el-option label="已审核" value="reviewed"></el-option>
          <el-option label="入预留款" value="deposit"></el-option>
          <el-option label="审核失败" value="auditFailed"></el-option>
          <el-option label="退款失败" value="refundFailed"></el-option>
          <el-option label="退款中" value="refunding"></el-option> -->
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="退款时间">
        <el-date-picker v-model="results.applyTime" type="date" format="yyyy-MM-dd" placeholder="退款时间">
        </el-date-picker>
      </el-form-item> -->
      <!-- <el-form-item label="订单号">
        <el-input v-model="results.orderId"  placeholder="请输入订单号"></el-input>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="searchBtn">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <!-- 表格 -->
    <el-table
      :data="tabelList"
      border
      class="account_table"
      size="mini"
      :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }"
    >
      <el-table-column
        fixed
        prop="orderType"
        label="退款订单类型"
        align="cneter"
        width="100"
      >
        <template slot-scope="scope">
          <template v-if="scope.row.orderType == 'flight'">飞机票订单</template>
          <template v-if="scope.row.orderType == 'train'">火车票订单</template>
          <template v-if="scope.row.orderType == 'hotel'">酒店订单</template>
          <template v-if="scope.row.orderType == 'vipCard'"
            >会员卡订单</template
          >
          <template v-if="scope.row.orderType == 'vipLounge'"
            >贵宾厅订单</template
          >
          <template v-if="scope.row.orderType == 'vipChannel'"
            >VIP通道订单</template
          >
        </template>
      </el-table-column>
      <el-table-column fixed prop="userName" label="会员姓名" width="100">
      </el-table-column>
      <el-table-column fixed prop="userAccount" label="手机号" width="120">
      </el-table-column>
      <el-table-column prop="refundStatus" label="退款状态" width="120">
        <template slot-scope="scope">
          <template v-if="scope.row.refundStatus == 'stayApply'"
            >待申请</template
          >
          <template v-if="scope.row.refundStatus == 'cancelApply'"
            >取消申请</template
          >
          <template v-if="scope.row.refundStatus == 'stayAudit'"
            >待审核</template
          >
          <template v-if="scope.row.refundStatus == 'cancelAudit'"
            >审核不通过</template
          >
          <template v-if="scope.row.refundStatus == 'stayPay'">待支付</template>
          <template v-if="scope.row.refundStatus == 'cancelPay'"
            >取消支付</template
          >
          <template v-if="scope.row.refundStatus == 'payFailure'"
            >支付失败</template
          >
          <template v-if="scope.row.refundStatus == 'paySuccess'"
            >支付成功</template
          >
        </template>
      </el-table-column>
      <el-table-column prop="refundType" label="退款方式" width="120">
        <template slot-scope="scope">
          <template v-if="scope.row.refundType == 'backtracking'"
            >原路退回</template
          >
          <template v-if="scope.row.refundType == 'reserveAmount'"
            >退预留款</template
          >
          <template v-if="scope.row.refundType == 'bankCard'"
            >退银行卡</template
          >
        </template>
      </el-table-column>
      <el-table-column
        width="120"
        prop="refundCashAmount"
        label="退款现金金额"
      ></el-table-column>
      <el-table-column
        prop="refundReserveAmount"
        label="退款预留款金额"
        width="120"
      >
      </el-table-column>
      <el-table-column prop="refundGoldAmount" label="退款金币金额" width="120">
      </el-table-column>
      <el-table-column prop="createDateTime" label="创建时间" width="160">
      </el-table-column>
      <el-table-column prop="createAdminName" label="创建人" width="120">
      </el-table-column>
      <el-table-column prop="applyAdminName" label="申请人" width="120">
      </el-table-column>
      <el-table-column prop="auditAdminName" label="审核人" width="120">
      </el-table-column>
      <el-table-column fixed="right" label="申请退款" width="290">
        <template slot-scope="scope">
          <el-button
            slot="reference"
            @click="refundAuditDetil(scope.row)"
            type="primary"
            size="mini"
            >详情</el-button
          >
            
          <el-popconfirm v-if="scope.row.refundStatus == 'stayAudit'" title="确认取消退款吗" @confirm="deleteairPortListNo" style="margin: 0 0 0  20px" >
            <el-button
              slot="reference"
              @click="handleClick(scope.row)"
              type="primary"
              size="mini"
              >暂不退款</el-button
            >
          </el-popconfirm>
          <el-popconfirm v-if="scope.row.refundStatus == 'stayAudit'"
            title="确认审核退款吗"
            @confirm="deleteairPortListrefund"
            style="margin: 0  20px"
          >
            <el-button
              slot="reference"
              @click="handleClickrefund(scope.row)"
              type="primary"
              size="mini"
              >退款</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-table
      :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }"
      :data="mes"
      border
      class="account_table"
      size="mini"
      @selection-change="handleSelectionChange"
    >
      <el-table-column fixed prop="employeeIdApply" label="申请人" width="150">
      </el-table-column>
      <el-table-column prop="applyTime" label="申请时间" width="120">
      </el-table-column>
      <el-table-column prop="cardCode" label="会员卡号" width="120">
      </el-table-column>
      <el-table-column prop="customerName" label="客户信息" width="100">
      </el-table-column>
      <el-table-column prop="collectionDate" label="收款日期" width="120">
      </el-table-column>
      <el-table-column prop="collectionAmount" label="收款金额" width="120">
      </el-table-column>
      <el-table-column prop="collectionType" label="收款渠道" width="120">
        <template slot-scope="scope">
          <template v-if="scope.row.collectionType == 'BankDebit'"
            >银行卡借记卡</template
          >
          <template v-if="scope.row.collectionType == 'Wechat'">微信</template>
          <template v-if="scope.row.collectionType == 'Alipay'"
            >支付宝</template
          >
          <template v-if="scope.row.collectionType == 'UnionPay'"
            >银联</template
          >
          <template v-if="scope.row.collectionType == 'UnionPayQRCode'"
            >银联二维码支付</template
          >
          <template v-if="scope.row.collectionType == 'BankCredit'"
            >银行信用卡</template
          >
          <template v-if="scope.row.collectionType == 'UnionQRCodePay'"
            >银联二维码</template
          >
          <template v-if="scope.row.collectionType == 'PhoneSoundPay'"
            >电话语音支付</template
          >
        </template>
      </el-table-column>
      <el-table-column prop="cardOwner" label="退款姓名" width="120">
      </el-table-column>
      <el-table-column prop="cardNo" label="退款账号" width="120">
      </el-table-column>
      <el-table-column prop="bankCity" label="开户城市" width="120">
      </el-table-column>
      <el-table-column prop="bankname" label="开户银行" width="120">
      </el-table-column>
      <el-table-column prop="refundmentType" label="会员退款类型" width="120">
        <template slot-scope="scope">
          <template v-if="scope.row.refundmentType == 1"
            >公司汇款给会员</template
          >
          <template v-if="scope.row.refundmentType == 2">原路退回</template>
          <template v-if="scope.row.refundmentType == '原路退回'"
            >原路退回</template
          >
          <template v-if="scope.row.refundmentType == 5">退预留款</template>
          <template v-if="scope.row.refundmentType == 6">退银行卡</template>
          <template v-if="scope.row.refundmentType == 3">微信自动退款</template>
          <template v-if="scope.row.refundmentType == 4"
            >支付宝自动退款</template
          >
        </template>
      </el-table-column>
      <el-table-column prop="refundmentAmount" label="退款金额" width="120">
      </el-table-column>
      <el-table-column prop="orderId" label="订单号" width="120">
      </el-table-column>
      <el-table-column prop="paymentPlatform" label="付款平台" width="120">
      </el-table-column>
      <el-table-column prop="refundmentDesc" label="备注" width="120">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-popconfirm title="确认取消退款吗" @confirm="deleteairPortListNo">
            <el-button
              slot="reference"
              @click="handleClick(scope.row)"
              type="text"
              size="small"
              >暂不退款</el-button
            >
          </el-popconfirm>
          <el-popconfirm
            title="确认取消退款吗"
            @confirm="deleteairPortListrefund"
            style="margin: 0 0 0 20px"
          >
            <el-button
              slot="reference"
              @click="handleClickrefund(scope.row)"
              type="text"
              size="small"
              >退款</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table> -->
    <div class="block">
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal"
      >
      </el-pagination>
    </div>
    <!-- 审核详情弹窗 -->
    <el-dialog
      :title="auditDetilTitle"
      :visible.sync="auditDetilDialogVisible"
      width="60%"
      center
    >
      <el-table
        v-if="auditDetilOrderType == 'vipCard'"
        :data="auditDetilList"
        border
        class="account_table"
        size="mini"
        :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }"
      >
        <el-table-column
          prop="cardHolderName"
          label="会员姓名"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="cardHolderPhone"
          label="会员手机号"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="orderNumber"
          label="订单号"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="payReqOrderNumber"
          label="支付流水号"
        ></el-table-column>
        <el-table-column
          prop="cardAmount"
          label="会员卡价格"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="actualPayAmount"
          label="支付总金额"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="reserveAmount"
          label="预留款金额"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="goldAmount"
          label="金币金额"
          width="100"
        ></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="auditDetilDialogVisible = false" type="primary"
          >取 消</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "customerRefundAudit",
  data() {
    return {
      // 审核订单详情
      auditDetilTitle: "会员卡订单详情",
      auditDetilDialogVisible: false,
      auditDetilList: [],
      auditDetilOrderType: null,
      // 确认退款数据
      handleClickrefundObj: {},
      // 确认暂不退款数据
      noHandleClickrefundObj: {},
      tabelList: [],
      checkvalue: "", //绑定多选框表格里面的值
      results: {
        orderType: null,
        userName: null,
        userAccount: null,
        refundStatus: null,
        refundType: null,
        pageSize: 10,
        pageNo: 1,
      },
      type: [
        {
          id: 0,
          label: "全部",
          names: "",
        },
        {
          id: 1,
          label: "银联云闪付APP",
          names: "unionPayApp",
        },
        {
          id: 2,
          label: "银联小程序微信",
          names: "unionPayWeChat",
        },
        {
          id: 3,
          label: "华夏付款平台",
          names: "huaXiaPay",
        },
        {
          id: 4,
          label: "交行付款平台",
          names: "trafficBank",
        },
        {
          id: 5,
          label: "农业银行付款平台",
          names: "agricultureBank",
        },
      ],
      checked: "true",
      arr2: [], //修改退款审核需要传的接口
      isSuccess: "", //修改退款审核需要传的接口
      // 分页
      pageTotal: 0,
      pageSize: 10,
      currentPage: 1,
    };
  },
  methods: {
    //分页
    handleSizeChange(value) {
      this.results.pageSize = value;
      this.getRefundApplyByAudit();
    },
    handleCurrentChange(value) {
      this.results.pageNo = value;
      this.getRefundApplyByAudit();
    },
    // 详情按钮事件
    refundAuditDetil(row) {
      console.log(row);
      if (row.orderType == "vipCard") {
        this.auditDetilTitle = "会员卡订单详情";
      } else if (row.orderType == "flight") {
        this.auditDetilTitle = "机票订单详情";
      } else if (row.orderType == "hotel") {
        this.auditDetilTitle = "酒店订单详情";
      } else if (row.orderType == "vipLounge") {
        this.auditDetilTitle = "贵宾厅订单详情";
      } else if (row.orderType == "vipChannel") {
        this.auditDetilTitle = "vip通道订单详情";
      } else if (row.orderType == "train") {
        this.auditDetilTitle = "火车票订单详情";
      }
      this.auditDetilOrderType = row.orderType;
      this.$axios
        .getRefundOrderList({
          id: row.id,
        })
        .then((res) => {
          if (res.code == "00000") {
            this.auditDetilList = res.data.orderInfoList;
            this.auditDetilDialogVisible = !this.auditDetilDialogVisible;
          }
        });
    },
    // 查询  审核列表
    searchBtn() {
      (this.results.pageSize = 10),
        (this.results.pageNo = 1),
        this.getRefundApplyByAudit();
    },
    // 会员退款审核列表接口
    getRefundApplyByAudit() {
      this.showLoading();
      this.$axios
        .getRefundApplyByAudit({
          orderType: this.results.orderType,
          userName: this.results.userName,
          userAccount: this.results.userAccount,
          refundStatus: this.results.refundStatus,
          refundType: this.results.refundType,
          pageSize: this.results.pageSize,
          pageNo: this.results.pageNo,
        })
        .then((res) => {
          this.closeLoading();
          if (res.code == "00000") {
            this.tabelList = res.data.records;
            this.pageTotal = res.data.total;
          }
        });
    },
    // 表格退款按钮
    handleClickrefund(row) {
      this.handleClickrefundObj = row;
    },
    // 表格确认退款按钮
    deleteairPortListrefund() {
      this.$axios
        .getupdApplyRefundStatus({
          id: this.handleClickrefundObj.id,
          refundStatus: "stayPay",
        })
        .then((res) => {
          if (res.code == "00000") {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.getRefundApplyByAudit();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        });
    },
    // 表格中暂不退款按钮
    handleClick(row) {
      this.noHandleClickrefundObj = row;
    },
    // 表格当前行暂不退款
    deleteairPortListNo() {
      this.$axios
        .getupdApplyRefundStatus({
          id: this.noHandleClickrefundObj.id,
          refundStatus: "cancelAudit",
        })
        .then((res) => {
          if (res.code == "00000") {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.getRefundApplyByAudit();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        });
    },
    //跳出
    closeLoading() {
      this.tableLoading.close();
    },
    //进入
    showLoading() {
      this.tableLoading = this.$loading({
        text: "拼命加载数据中", //显示在加载图标下方的加载文案
        spinner: "el-icon-loading", //自定义加载图标类名
        background: "rgba(0, 0, 0, 0.4)", //遮罩层颜色
        target: document.querySelector("#table"), //loadin覆盖的dom元素节点
      });
    },
  },
  mounted() {
    this.getRefundApplyByAudit(); //会员申请退款审核
  },
};
</script>

<style scoped>
.customerRefundAudit {
  margin: 30px 0 0 30px;
}
</style>